<template>
  <div class="container-table">
    <el-table
      :data="data.typeList"
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column fixed prop="category_id" label="商品类别ID" />
      <el-table-column prop="category_name" label="商品类别名称" />
      <el-table-column label="级别">
        <template #default="scope">
          {{ scope.row.category_father ? '二级类别' : '一级类别' }}
        </template>
      </el-table-column>
      <el-table-column prop="category_father" label="父级类别">
        <template #default="scope">
          {{
            scope.row.category_father
              ? scope.row.category_father.category_oneName
              : '无'
          }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="scpoe">
          <el-button
            link
            type="primary"
            size="small"
            @click="handleMod(scpoe.row)"
            >编辑</el-button
          >
          <el-button
            link
            type="danger"
            size="small"
            @click="handleDel(scpoe.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="container-pagination">
      <el-pagination
        v-model:currentPage="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :total="allCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[1, 2, 3, 4, 5, 6, 7]"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>
    <CategoryModify ref="categoryModify"></CategoryModify>
  </div>
</template>

<script setup>
import { computed, reactive, ref, watch, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { reqUpdateOneType, reqUpdateTwoType } from '@/api/goods'
import CategoryModify from './CategoryModify'
import { ElMessage, ElMessageBox } from 'element-plus'
const data = reactive({
  typeList: []
})
const poxy = getCurrentInstance()
const store = useStore()
const { dispatch, commit, getters } = store

// 编辑按钮
const handleMod = (category) => {
  poxy.refs.categoryModify.changeDialogFormVisible()
  commit('goods/SAVECATEGOTY', category)
}
// 删除按钮
const handleDel = async (category) => {
    // 确认删除
  ElMessageBox.confirm('确定删除该商品?', '提醒', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      // 删除商品
      let result
      if (category.category_father === null) {
        result = await reqUpdateOneType({
          category_oneId: category.category_id,
          one_status: 0
        })
      } else {
        result = await reqUpdateTwoType({
          category_twoId: category.category_id,
          two_status: 0
        })
      }
      if (result.code === 200 && result.data === 1) {
        initCategoryShow()
        ElMessage({
          message: '删除成功！',
          type: 'success'
        })
      } else {
        ElMessage.error('删除失败！')
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}
const getTypeList = () => {
  dispatch('goods/getTypeList', { pagination })
}
// 每页数量改变的方法
const handleSizeChange = (val) => {
  pagination.value.pageSize = val
  getTypeList()
}
// 页数改变的方法
const handleCurrentChange = (val) => {
  pagination.value.currentPage = val
  getTypeList()
}
// 初始化类别展示页面
const initCategoryShow = async () => {
  await dispatch('goods/getTypeCount')
  await dispatch('goods/getTypeList', {
    pagination: ref({ currentPage: 1, pageSize: 5 })
  })
}
initCategoryShow()
const pagination = computed(() => getters.typePagination)
const oneCount = computed(() => getters.oneCount || 0)
const twoCount = computed(() => getters.twoCount || 0)
const allCount = computed(() => oneCount.value + twoCount.value)
const oneTypeList = computed(() => getters.oneTypeList)
const twoTypeList = computed(() => getters.twoTypeList)
watch([oneTypeList, twoTypeList], (newValue, oldValue) => {
  if (
    newValue[0].length + newValue[1].length <= pagination.value.pageSize &&
    newValue[1] !== oldValue[1]
  ) {
    data.typeList = []
    const typeList = []
    newValue[0].forEach((e) => {
      const obj = {
        category_id: e.category_oneId,
        category_name: e.category_oneName,
        category_father: null,
        category_status: e.one_status
      }
      typeList.push(obj)
    })
    newValue[1].forEach((e) => {
      const obj = {
        category_id: e.category_twoId,
        category_name: e.category_twoName,
        category_father: e.onetypes[0],
        category_status: e.two_status
      }
      typeList.push(obj)
    })
    data.typeList = [...typeList]
  }
})
// const typeList = computed(() => {
//   const typeList = []
//   oneTypeList.value.forEach((e) => {
//     const obj = {
//       category_id: e.category_oneId,
//       category_name: e.category_oneName,
//       category_father: null,
//       category_status: e.one_status
//     }
//     typeList.push(obj)
//   })
//   twoTypeList.value.forEach((e) => {
//     const obj = {
//       category_id: e.category_twoId,
//       category_name: e.category_twoName,
//       category_father: toRaw(e.onetypes[0]),
//       category_status: e.two_status
//     }
//     typeList.push(obj)
//   })
//   return typeList
// })

/*
p1:(currentPage-1) * pageSize , p2:pageSize
  11111,11111,11122,22222
  页码 * 每页数量 <= 一级类别的总数:
    1 * 5 < 13 : 全是一级
      5 - 13 = -8 < 0  此时所有的数据为 一级类别
        1 1,5
        1 2,5
  页码 * 每页数量 > 一级类别的总数:
    3 * 5 > 13 : 一二级混有
      15 - 13 = 2 gap < 5 此时需要 2 个 二级类别的数据
        1 3,5
        2 3,2 => 1,2 => 0,2
    4 * 5 > 13 : 全是二级
      20 - 13 = 7 > 5 此时需要 5 个 二级类别的数据 p1+2 gap , p2
        2 4,5 => 1,5 => 0,5 => 2,7 (0+2,2+5)
        2 5,5 => 2,5 => 5,5 => 7,12 (5+2,7+5)
        2 6,5 => 3,5 => 10,5 => 12,17 (10+2,12+5)
  if(currentPage * pageSize <= oneCount){
    请求一级类别(currentPage,pageSize)
  }else{
    let totalGap = 0
    const gap = currentPage * pageSize - oneCount
    const oneTotalPage = oneCount / pageSize 全部数据为一级类别共几页 13 / 5 = 2
    if(gap < pageSize){
      totalGap = gap
      请求一级类别(currentPage,pageSize)
      请求二级类别(currentPage-oneTotalPage,gap)
    }else{
      请求二级类别(currentPage-oneTotalPage-1,pageSize,totalGap)
    }
  }
*/
</script>

<style lang="scss" scoped></style>
